<template>
	<view :class="currentTheme">
		<a-nabbar name="成员管理" />
		<view class="u-padding-32">
			<view class="u-padding-top-12">
				<item-box :padding="0">
					<view class="u-padding-20 content-desc-item u-font-26">店长</view>
					<view v-for="(item,index) in DZList" :key="index" class="u-padding-20 u-flex u-row-between u-border-top">
						<view class="u-flex">
							<view class="u-margin-right-35">
								<item-image :type="'1'" :img="item.avatar" :size="80" />
							</view>
							<view class="firstDz" v-if="item.isFirst===1">
								总店长
							</view>
							<text class="u-margin-right-35 content-desc-item u-font-34">{{item.nickname}}</text>
						</view>
						<view v-if="isStore || isFirst&&item.isFirst!=1">
							<u-icon name="bianji1" custom-prefix="custom-icon" color="#765CFE" size="30"
								@click="edit(item)"></u-icon>
							<u-icon name="close" custom-prefix="custom-icon" color="#765CFE" size="30"
								class="u-margin-left-40" @click="close(item,'DZ')"></u-icon>
						</view>
					</view>
				</item-box>
			</view>
			<view class="u-padding-top-20">
				<item-box :padding="0">
					<view class="u-padding-20 content-desc-item u-font-26">DM</view>
					<view v-for="(item,index) in DMList" :key="index" class="u-padding-20 u-flex u-row-between u-border-top">
						<view class="u-flex">
							<item-image :type="'1'" :img="item.avatar" :size="80" />
							<text class="u-margin-left-35 content-desc-item u-font-34">{{item.nickname}}</text>
						</view>
						<view v-if="!isDM">
							<u-icon name="bianji1" custom-prefix="custom-icon" color="#765CFE" size="30"
								@click="edit(item)"></u-icon>
							<u-icon name="close" custom-prefix="custom-icon" color="#765CFE" size="30"
								class="u-margin-left-40" @click="close(item,'DM')"></u-icon>
						</view>
					</view>
				</item-box>
			</view>
		</view>
		<fixed-team v-if="!isDM" btnText="新增" @btnClick="edit">

		</fixed-team>
		<model v-model="modelFlag" :show-title="false" show-cancel-button   cancel-color="#333333" :confirm-color="currentThemeObj.primary"
			@confirm="removeItem" content="是否删除该成员？" />
	</view>
</template>

<script>
	import {
		getDetail,
		deleteIds
	} from '@/api/crud.js'
	import model from '@/components/u-modal/u-modal.vue'
	export default {
		data() {
			return {
				DZList: [],
				DMList: [],
				modelFlag: false,
				apiType: 'systemStoreUser',
				apiModule: 'shopApi'
			}
		},
		computed: {
			isDM() {
				return this.loginForm.clerkRole == 'DM'
			},
			isDZ() {
				return this.loginForm.clerkRole == 'DZ'
			},
			isStore() {
				return !this.loginForm.isClerk && this.loginForm.userType !== 'issue'
			},
			isFirst() {
				const isFirstUser = this.DZList.find(val => val.isFirst == 1) || '';
				return isFirstUser && this.loginForm.uid === isFirstUser.uid; //判断当前用户是否为第一位店长
			}
		},
		components: {
			model
		},
		onShow() {
			getDetail({
				storeId: this.$store.getters.loginForm.storeId
			}, this.apiType, this.apiModule, 'allStoreUser').then(res => {
				this.DZList = res.filter(val => val.userType == 'DZ').map(val => {
					val.isMe = val.uid === this.loginForm.uid
					return val
				});
				this.DMList = res.filter(val => val.userType == 'DM');
			})
		},
		methods: {
			edit(item = {}) {
				this.$u.route({
					url: '/pagesA/storePeople/detail',
					params: {
						id: item.id
					}
				})
			},
			close(item, type) {
				this.activeItem = item;
				this.modelFlag = true;
				this.activeType = type
			},
			removeItem() {
				deleteIds('', this.apiType, this.apiModule, this.activeItem.id).then(res => {
					const list = this[`${this.activeType}List`];
					if (list.length) {
						this[`${this.activeType}List`] = list.filter(val => val.id != this.activeItem.id)
						this.$u.toast('删除成功')
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.fixed {
		&-empty {
			height: 200rpx;
		}

		&-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;

			.add-person {
				margin: 30rpx;
				border-radius: 50rpx;
				line-height: 88rpx;
				text-align: center;
				color: #CCCCCC;
				font-size: 34rpx;
				background-color: #765CFE;
			}
		}
	}

	.firstDz {
		background-color: $primary;
		font-size: 24rpx;
		line-height: 1;
		color: white;
		padding: 5rpx 10rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.isFirstAvatar {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
		border: 1rpx solid $primary;
	}
</style>
